<template>
  <div class="container">
    <div class="login">
      <div class="head-img">
        <el-image
        style="width: 80px; height: 80px;border-radius: 50%;"
            src="../../../static/img/head-img.jpg"
            :fit="fit"></el-image>
      </div>
      <h1 style="margin-top: 60px; color:#8B1A1A;">充电桩管理系统管理员登陆</h1>
      <el-row type="flex" justify="center">
        <el-col :span="18">
          <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm"
                   class="demo-ruleForm">
            <el-form-item label="用户名：" prop="username" label-width="80px">
              <el-input maxlength="10" type="text" v-model="ruleForm.username" placeholder="请输入用户名"
                        autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="密码：" prop="password" label-width="80px">
              <el-input minlength="4" maxlength="16" type="password" v-model="ruleForm.password"
                        placeholder="请输入密码" autocomplete="off" show-password></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm')">登录</el-button>
                <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: 'Login',
  data() {
    var validateUsername = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入1-10位字符或数字'))
      } else {
        callback()
      }
    }
    var validatePassword = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入4-16位字符或数字'))
      } else {
        callback()
      }
    }
    return {
      ruleForm: {
        password: '',
        username: ''
      },
      rules: {
        password: [
          {validator: validatePassword, trigger: 'blur'}
        ],
        username: [
          {validator: validateUsername, trigger: 'blur'}
        ]
      }
    }
  },
  methods: {
    submitForm(formName) {
      var self = this;
      this.$refs[formName].validate((valid) => {
        if (valid) {
          axios.post('http://112.124.41.199:6112/csms/user/login', {
            username: this.ruleForm.username,
            password: this.ruleForm.password
          }).then(function (res) {
            if (res.data.success) {
              self.$store.commit('getUserId', res.data.userid);
              self.$emit('login');
              self.$message.success('登录成功，即将跳转首页');
              setTimeout(() => {
                self.$router.push('/home')
              }, 1000)
            } else {
              self.$message.error(res.data.msg);
            }
          }).catch(function (err) {
            self.$message.error(err);
          })
        } else {
          return false
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
  }
}
</script>

<style scoped>
.container {
  display: flex;
  width:100%;
  height: 100%;
  position:fixed;
  background: url("../../../static/img/6.jpg");
  background-size:100% 100%;
}

.login {
  width: 400px;
  height: 300px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgb(255, 255, 255, 80%); 
  border-radius:15px; 
}

.head-img {
  position: absolute;
  top: -10%;
  left: 36%;
  width: 80px;
  height: 80px;
  background-color: rgb(255, 255, 255, 0);
}

.el-button--primary {
  background-color: #8b1a1a;
  border-color: #8b1a1a;
  margin-left: 10px;
  margin-right:10px;
  span{
    color: #FFF;
  }
}
.el-button--primary:hover{
  color:#FFF;
  background-color: rgb(139, 26, 26,80%);
  border-color: #8b1a1a;
}
.el-button--default{
  background-color:#FFF;
  border: 1px solid #DCDFE6;
  color: #606266;
  span{
    color: #606266;
  }
}
.el-button--default:hover{
  background-color:#FFF;
  border-color: #8b1a1a;
  span{
    color: #8b1a1a;
  }
}
</style>
